<template>
  <div class="green_box flex" v-if="data">
    <div class="flex2 flexC">
      <p class="font_s32 flex title">{{data.orgName}}<span class="font_s12">社会信用代码号：{{data.unicode}}</span></p>
      <ul class="dj_ul" style="padding-right: 5%;box-sizing: border-box">
        <li class="flexC positionR font_s16">
          <img src="../../../assets/img/comprehensive/6.png" alt=""/>
          <p class="font_s32" style="color: #E3D757;font-weight: 500">{{data.xydj}}</p>
          <p>信用等级</p>
        </li>
        <li class="flexC positionR font_s16">
          <img src="../../../assets/img/comprehensive/5.png" alt=""/>
          <p class="font_s32" style="color: #61D9A7;font-weight: 500">{{data.xyfs}}</p>
          <p>信用分</p>
        </li>
        <li class="flexC positionR font_s16">
          <img src="../../../assets/img/comprehensive/4.png" alt=""/>
          <p class="font_s32" style="color: #F3A13F;font-weight: 500">{{data.fxdj}}</p>
          <p>风险等级</p>
        </li>
        <li class="flexC positionR font_s16">
          <img src="../../../assets/img/comprehensive/3.png" alt=""/>
          <p class="font_s32" style="color: #E0594C;font-weight: 500">{{data.orgLevel}}</p>
          <p>机构等级</p>
        </li>
      </ul>
      <p class="address_p font_s16">
        <img src="../../../assets/img/comprehensive/13.png"/>
        {{data.orgAddr}}
      </p>
      <p class="address_p font_s16">
        <img src="../../../assets/img/comprehensive/12.png"/>
        负责人：{{data.principal}}
      </p>
      <p class="address_p font_s16">
        <img src="../../../assets/img/comprehensive/14.png"/>
        开办时间：{{data.orgOpenDate}}
      </p>
      <ul class="xue_ul" style="margin-top: 4%">
        <li v-for="(item, index) in acupointsList"
            :key="index"
            class="flex">
          <p class="font_s26">{{item.num}}</p>
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
    <div class="flex1">
      <div class="jgsmzq">
        监管全生命周期
      </div>
      <div v-if="dataImg" style="justify-content: center;display: flex;margin: 10% auto;">
        <img src="../../../assets/img/comprehensive/no_data_Img.png" alt="" style="height: 9.625rem;" />
      </div>
      <div class="superviseList" style="height: 67vh;">
        <ul class="jgsmzq_lc font_s18">
          <li v-for="(item,index) in superviseLifecycle" :key=index>
            <p style="color: #FFFFFF; margin-left: -7.1rem;" class="flex">
              <span style="width: 6.1875rem;display: inline-block;">{{item.jgrq}}</span>
              <img class="verticM" src="../../../assets/img/comprehensive/1.png" style="width: 1.625rem;height: 1.625rem">
              <span style="margin-left: 0.5rem;">抽查机关：{{item.ccjg}}</span>
            </p>
            <p>检查人: {{item.jcr}}</p>
            <p style="color: #FFFFFF;margin-left: 1.5rem;padding: 0.5rem;background: #0D1E10;border: 1px solid #087720">发现问题：{{item.czwt}}</p>
            <p>整改措施: {{item.zgcs}}</p>
            <p style="color: #FFFFFF;margin-left: 1.5rem;padding: 0.5rem;background: #0D1E10;border: 1px solid #087720">扣分（风险）:{{item.kf}}</p>
            <p style="height: 1rem;"></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

import { queryBzfwOrgJgJgsmzq } from '@/api/home'
export default {
  name: 'MapInfo',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    acupointsList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      JGDJ: {
        '0': '待评定',
        '1': '一级',
        '2': '二级',
        '3': '三级'
      },
      superviseLifecycle: [],
      dataImg: false
    }
  },
  watch: {
    data: function (newQuestion, oldQuestion) {
      console.log('data:', oldQuestion)
      this.getData(newQuestion.orgId)
    }
  },
  methods: {
    getData (id) {
      queryBzfwOrgJgJgsmzq({
        orgId: id
      }).then((response) => {
        if (response.data) {
          this.superviseLifecycle = response.data.response
          if (this.superviseLifecycle.length > 0) {
            this.dataImg = false
          } else {
            this.dataImg = true
          }
        }
      }).catch((response) => {
        console.log(response)
      })
    }
  }

}
</script>

<style scoped lang="scss">
.hide{
  display: none;
}
.show{
  display: inline-block;
}
.green_box {
  padding: 0 1.5rem;
  box-sizing: border-box;
  .title {
    font-family: PingFang SC;
    font-weight: bold;
    color: #5AD834;
    span {
      color: #71FCFE;
      height: 1.875rem;
      line-height: 1.875rem;
      background: #184053;
      border-radius: 12px;
      padding: 0 1rem;
      font-weight: normal;
      box-sizing: border-box;
      margin-left: 2rem;
      margin-top: .5rem;
    }
  }
  .dj_ul li {
    float: left;
    width: 25%;
    height: 4.375rem;
    padding: .3rem 0 0 5.0625rem;
    color: #A2B8D8;
    box-sizing: border-box;
    line-height: 2rem;
    justify-content: center;
    display: flex;
    margin: 3% 0;
    img {
      position: absolute;left: 1rem;top: .375rem;width: 3.25rem;height: 3.5625rem;
    }
  }
  .address_p {
    height: 2.75rem;
    line-height: 2.75rem;
    font-family: PingFang SC;
    color: #E9FAEE;
    text-align: left;
    padding-left: 1.7rem;
    position: relative;
    img {
      width: 1rem;
      height: 1.125rem;
      position: absolute;
      left: 0;
      top: .8125rem;
    }
  }
  .xue_ul li {
    width: 30%;
    margin-right: 3.3%;
    float: left;
    background: url("../../../assets/img/comprehensive/2.png") no-repeat;
    background-size: 100% 100%;
    height: 4.9375rem;
    margin-bottom: 3%;
    color: #E9FAEE;
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    p:first-child{
      width: 42%;
      height: 4.9375rem;
      text-align: center;
      line-height: 4.9375rem;
      color: #71FCFE;
      font-weight: 500;
    }
  }
}
.jgsmzq {
  margin-left: 2rem;
  margin-bottom: 0.5rem;
  text-align: center;
  width: 12rem;
  color: #fff;
  height: 3.375rem;
  line-height: 3.125rem;
  background: url(../../../assets/img/comprehensive/8.png) no-repeat;
  background-size: 100% 100%;
}
.superviseList {
  overflow-x: hidden;
  overflow-y: scroll
}

.superviseList::-webkit-scrollbar {
  width: 0;
}

.superviseClose {
  position: absolute;
  right: 3rem;
  top: 2.5rem;
}
.jgsmzq_lc {
  border-left: solid 2px #B5FFE6;
  margin-left: 8rem;
  color: white;
}
ul.jgsmzq_lc li p{
  color: #D0FEFF;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

ul.star_p{
  display: flex;
}
ul.star_p li{
  width: 1rem;
  height: 1rem;
  margin: 0 0.1rem;
  background-image: url("../../../assets/img/comprehensive/010.png");
  background-size: 100% 100%;
}
ul.grade_f li {
  margin-right: 0.3rem;
  padding: 0.5rem;
  background-image: url("../../../assets/img/comprehensive/009.png");
  background-size: 100% 100%;
}
ul.space li {
  margin: 0.5rem;
  padding: 0.3rem;
  line-height: normal;
}
</style>
